<template>
  <div class="service-charge">
    <div class="service-charge-left">
      <div class="service-charge-title">
        表格数据
        <div>
          <el-date-picker
            style="width: 200px;flex-grow: 0;"
            v-model="val"
            type="monthrange"
            format="YYYY-MM"
            valueFormat="YYYY-MM"
            :clearable="false"
            @change="onChange"
          />
          <el-button style="margin-left: 10px;" @click="onExport">导出</el-button>
        </div>
      </div>
      <ElTable :data="list" max-height="240px">
        <ElTableColumn prop="month" label="时间" />
        <ElTableColumn prop="value" label="本期服务费" />
      </ElTable>
    </div>

    <div class="service-charge-right">
      <EChart class="service-charge-chart" :options="leftChart" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getScriptManagePage } from './api'
import EChart from '@/components/chart/EChart.vue'
import { graphic } from 'echarts'
import dayjs from 'dayjs'
import { exportExcel } from '@/utils/common'
import { useRoute } from 'vue-router'

const route = useRoute()

const startMonth = dayjs().startOf('year').format('YYYY-MM')
const endMonth = dayjs().format('YYYY-MM')
const val = ref([startMonth, endMonth])
const list = ref([])

const leftChart = computed(() => {
  return {
    grid: {
      top: '40PX',
      right: '70PX',
      left: '80PX',
      bottom: '50px'
    },
    xAxis: [{
      type: 'category',
      color: '#ADAEB0',
      data: list.value.map(i => i.month),
      axisPointer: {
        type: 'line'
      },
      axisLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      },
      axisLabel: {
        margin: 20,
        color: '#ADAEB0',
        textStyle: {
          fontSize: 12
        },
      },
      axisTick: {
        show: false
      }
    }],
    yAxis: [{
      axisLabel: {
        color: '#ADAEB0',
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#ADAEB0'
        }
      }
    }],
    series: [
      {
        name: '新增客户',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        data: list.value.map(i => i.value),
        lineStyle: {
          normal: {
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(9, 77, 178, .5)'
            }, {
                offset: 0.8,
                color: 'rgba(9, 77, 178, 0)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: '#094DB2',
            borderColor: '#094DB2',
            borderWidth: 12
          }
        }
      }
    ]
  }
})

const getData = () => {
  getScriptManagePage(val.value)
    .then(res => {
      list.value = res || []
    })
}

const onChange = () => {
  getData()
}

const onExport = () => {
  exportExcel({
    url: route.name,
    startMonth: val.value[0],
    endMonth: val.value[1]
  })
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.service-charge {
  display: flex;
  &-left {
    width: 500px;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 15px;
    box-sizing: border-box;
  }
  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-right {
    flex-grow: 1;
    margin-left: 15px;
    height: 339px;
    background: #FFFFFF;
    border-radius: 4px;
  }

  &-chart {
    height: 100%;
  }
}
</style>
